<style scoped>
@import url("./Main.css");
</style>
<template>
  <el-container style="height: 100%">
    <el-aside style="width: 210px; height: 100%; background-color: #545c64">
      <div
        class="logo"
        style="
          width: 100px;
          height: 23px;
          font-size: 18px;
          font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
          font-weight: normal;
          color: #ffffff;
          margin-left: 47px;
          margin-top: 6px;
        "
      >
        ORDER聚造
      </div>
      <common-aside
        style="width: 210px; border: none; background-color: #545c64"
      ></common-aside
    ></el-aside>
    <el-container
      style="width=1625px;display: flex;
    flex-wrap: wrap;"
    >
      <el-header>
      <div style="display: flex;">
        <div class="tab">{{$route.meta.title}}</div>
        <el-avatar class="photo">123</el-avatar>
        <div class="user"><span style="color:#black">超级管理员 </span> 
              <el-tooltip placement='bottom'>
                <div slot="content" @click="dialogFormVisible=true">修改密码</div>
                <span>{{nickName}}</span>
              </el-tooltip>
              <span>，您好！</span></div>
        <el-button
          style="margin-top: 40px; margin-left: 8px"
          type="danger"
          size="small"
          round
          icon="el-icon-switch-button"
          @click="logout"
          >退出</el-button
        >
      </div>
       <!-- 修改密码弹窗 -->
       <div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" label-width="400px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="原密码" prop="passWord">
          <el-input type="password" v-model="ruleForm.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="NewpassWord">
          <el-input type="passWord" v-model="ruleForm.NewpassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewpassWord">
          <el-input type="passWord" v-model="ruleForm.reNewpassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog></div>
      </el-header>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from "../src/components/CommonAside.vue";
import md5 from "js-md5"
export default {
  name: "App",
  components: {
    CommonAside,
  },
 data(){
    return {
      nickName: '',
      dialogFormVisible: false,
      ruleForm:{
         passWord: '',
         NewpassWord: '',
         reNewpassWord: ''
       },
       rules:{
        passWord:[
           { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        NewpassWord:[
           { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        reNewpassWord:[
           { required: true, message: '请确认新密码', trigger: 'blur' },
           { validator: ( rule, value, callback) => {
             if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.ruleForm.NewpassWord) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
           }, trigger: 'blur' }
        ],
       
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "admin/login",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/login";
          }
        });
      });
    },
        changePassWord (){
      this.$refs.ruleForm.validate((valid) => {
        if(valid){
          this.$http({
            url:'/admin/changePassWord',
            method:'POST',
            data:{
              passWord:md5(this.ruleForm.passWord),
              NewpassWord:md5(this.ruleForm.NewpassWord)
            }
          }).then(res =>{
            if(!res.errorMsg){
              this.$message({
                message: '修改密码成功',
                type:'success',
                duration:3000
              });
              //修改成功在延时之后返回登录页
              setTimeout(() => {
                 location.href = "#/login";
              },3000)
            }
          })
        }else {
          return false;
        }

      })

    },
  },
      created() {
      //从缓存中获取登录用户信息
      let user = localStorage.getItem("user");
      if (!user) {
        console.log(history, location);
        location.href = location.origin + "#/login";
      } else {
        //解析为对象
        user = JSON.parse(user);
        //设置头像
        this.photo =
          user.avatarUrl || require("../img/Canvas_slices/-e-密码.png");
        //设置昵称
        this.nickName = user.nickName || "bamboo";
        //获取菜单
        //this.getMenus()
      }
    },
};
</script>
